<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		
		<view class="back" @tap="back" :style="{top: barHeight + 'px'}"><uni-icons type="left" size="26"></uni-icons></view>
		
		<u-top-pic :list="topInfo"></u-top-pic>
		
		<view class="song_box">
			<u-single-list-image :list="songs" :geDanFunctions="geDanFunctions" :refs="ref" :show="true"></u-single-list-image>
		</view>
		
		<u-popup-comment :list="comments" :total="total"></u-popup-comment>
	</view>
</template>

<script>
	import {album, comment} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default{
		data(){
			return{
				topInfo: {},
				songs: {
					songs: [],
					moreText: '已经到底'
				},
				geDanFunctions: [
					{text: '收藏', type: 'collection'},
					{text: '添加歌单', type: 'add'},
					{text: '查看歌手', type: 'select'}
				],
				ref: 'albumPopup',
				total: 0,
				comments: [],
				barHeight: 0
			}
		},
		
		onLoad(option) {
			this.album(option);
			this.comment(option.id);
			this.barHeight = getApp().globalData.barHeight;
		},
		
		methods: {
			back(){
				util.jump('navigateBack', '');
			},
			
			album(id){
				album(id).then(data => {
					let result = data.album;
					this.topInfo.title = result.name;
					this.topInfo.author = result.artist.name;
					this.topInfo.coverImgUrl = result.blurPicUrl;
					this.topInfo.createTime = util.formatDate(result.publishTime);
					this.topInfo.subscribedCount = result.mark;
					this.topInfo.shareCount = result.info.shareCount;
					this.topInfo.commentCount = result.info.commentCount;
					this.topInfo.description = result.description;
					this.songs.songs = data.songs;
				})
			},
			
			comment(id){
				comment({id: id, type: 2}).then(data => {
					this.commentCount = data.total;
					this.total = data.total;
					data.hotComments.forEach((val,key) => {
						data.hotComments[key].time = util.formatDate(val.time);
					});
					this.comments = data.hotComments;
				});
			}
		},
		onUnload(){
			uni.$emit('closePopup', this.ref);
		}
	}
</script>

<style>
	.back{
		padding: 8px;
		position: absolute;
		left: 0;
		z-index: 999;
	}
	
	.song_box{
		width: 100%;
		background-color: #fff;
	}
</style>